<template>
  <view class="detail-container">
    <view v-if="loading" class="loading">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view v-else class="detail-card">
      <view class="user-header">
        <image class="avatar" :src="user.avatar || '/static/images/profile.jpg'" mode="aspectFill"></image>
        <view class="user-info">
          <text class="user-name">{{user.userName}} ({{user.nickName}})</text>
          <text class="user-status" :class="{'enabled': user.status === '0', 'disabled': user.status === '1'}">
            {{user.status === '0' ? '正常' : '停用'}}
          </text>
        </view>
      </view>
      
      <view class="detail-item">
        <text class="label">用户编号</text>
        <text class="value">{{user.userId}}</text>
      </view>
      <view class="detail-item">
        <text class="label">部门</text>
        <text class="value">{{user.dept && user.dept.deptName || '-'}}</text>
      </view>
      <view class="detail-item">
        <text class="label">手机号码</text>
        <text class="value">{{user.phonenumber || '-'}}</text>
      </view>
      <view class="detail-item">
        <text class="label">邮箱</text>
        <text class="value">{{user.email || '-'}}</text>
      </view>
      <view class="detail-item">
        <text class="label">创建时间</text>
        <text class="value">{{user.createTime || '-'}}</text>
      </view>
      <view class="detail-item">
        <text class="label">最后登录</text>
        <text class="value">{{user.loginDate || '-'}}</text>
      </view>
      
      <view class="btn-group">
        <button type="primary" @click="handleEdit">编辑</button>
        <button type="default" @click="goBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getUser } from "@/api/system/user";

export default {
  data() {
    return {
      loading: true,
      userId: null,
      user: {}
    };
  },
  onLoad(options) {
    if (options && options.userId) {
      this.userId = options.userId;
      this.getUser();
    } else {
      this.$modal.showToast("参数错误");
      this.goBack();
    }
  },
  methods: {
    getUser() {
      this.loading = true;
      getUser(this.userId).then(response => {
        this.user = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleEdit() {
      this.$tab.navigateTo("/pages/system/user/edit?userId=" + this.userId);
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 20px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.detail-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
    
    .user-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .user-status {
      padding: 2px 10px;
      border-radius: 15px;
      font-size: 12px;
      width: fit-content;
      
      &.enabled {
        background-color: #e1f3d8;
        color: #67c23a;
      }
      
      &.disabled {
        background-color: #fde2e2;
        color: #f56c6c;
      }
    }
  }
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
  
  .label {
    width: 100px;
    color: #606266;
  }
  
  .value {
    flex: 1;
    color: #303133;
    font-weight: 500;
  }
}

.btn-group {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  
  button {
    margin: 0 10px;
    width: 120px;
  }
}
</style> 